<template>
  <div class="goal-wrapper">
    <span style="display: none;">{{goal}}</span>
    <div @click="editGoal(goal.id)" class="goal-content" :style="{'top': goal.top + 'px', 'left': goal.left + 'px', 'height': goalHeight + 'px', 'width': goalWidth + 'px', 'min-height': goalHeight}">
      <span v-if="goal.belongId" class="left-line" :style="{'top': (goalHeight/2) + 'px'}"></span>
      <span v-if="goal.topgoal !== 0" class="top-line" :style="{'height': getTopLineHeight() + 'px', 'bottom': goalHeight/2 + 'px'}"></span>
      <span class="bottom-line" v-if="goal.child.length > 0 && goal.show" :style="{'height': (getBottomLineHeight()+2) + 'px', 'bottom': '-' + getBottomLineHeight() + 'px'}"></span>
      <i class="el-icon-plus add-btn" @click.stop="addKr(false, goal.id, goal.goalName)"></i>
      <i class="show-btn" v-if="goal.child.length > 0" :class="goal.show ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" @click.stop="openKr"></i>
      <div class="item" :style="{'height': goalHeight - 3 + 'px'}">
        <div class="over-text-hidden">{{goal.goalName}}</div>
        <el-progress :percentage="goal.goalProgressPercent * 1 || 0" :style="{'width': goalWidth - 30 + 'px'}"></el-progress>
        <div class="row">
          <div class="level">{{goalTag[goal.goalTag * 1 - 1]}}</div>
          <div class="user over-text-hidden" v-if="goal.goalExecuteDepartmentName">{{goal.goalExecuteDepartmentName}} {{goal.goalPrincipalName}}</div>
        </div>
      </div>
    </div>
    <div v-for="(kr, krIdx) in goal.child" :style="{'top': kr.top + 'px', 'left': (kr.left+20) + 'px','height': krHeight + 'px', 'width': krWidth + 'px','min-height': krHeight + 'px'}" :key="kr.id" class="kr-content" v-show="goal.show">
      <span class="pre-line" :style="{'top': (krHeight/2) + 'px'}"></span>
      <span v-show="kr.height > krHeight" :style="{'top': (krHeight/2) + 'px'}" class="next-line"></span>
      <i class="el-icon-plus add-btn" v-if="kr.krDataType==='1'" @click.stop="addGoalUnderKr(kr.id, kr.krName)" :style="{'top': kr.height > krHeight ? 'calc(50% - 25px)' : 'calc(50% - 10px)', 'right': kr.hasChild && kr.show ? '-66px' : '-46px'}"></i>
      <i class="show-btn" v-if="kr.hasChild" :class="kr.show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" @click.stop="openChild(krIdx, kr)"></i>
      <div class="item" :style="{'height': krHeight - 3 + 'px'}">
        <div :class="kr.krDataType==='1' ? 'over-text-hidden' : 'over-text-hidden2'"><i class="kr-logo">{{kr.krDataType==='1' ? 'KR':'里程碑'}}</i><span>{{kr.krName}}</span></div>
        <el-progress :percentage="kr.krProgressPercent * 1 || 0" :style="{'width': krWidth - 30 + 'px'}" v-if="kr.krDataType === '1'"></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
import formUtil from "@/utils/formUtil";

export default {
  data() {
    return {
      goalTag: ['公司级','部门级','团队级'],
    }
  },
  props: ['goal', 'goalHeight', 'goalWidth', 'krHeight', 'krWidth'],
  mounted() {

  },
  methods:{
    openKr() {
      this.$emit('openKr', this.goal);
    },
    openChild(krIdx, kr) {
      this.$emit('openChild', krIdx, this.goal, kr);
    },
    getBottomLineHeight() {
      let childtop = this.goal.child[this.goal.child.length - 1].top + this.krHeight/2;
      let goalbottom = this.goal.top + this.goalHeight;
      return childtop - goalbottom;
    },
    getTopLineHeight() {
      return this.goal.top - this.goal.topgoal
    },
    addKr(krId, goalId, goalName) {
      this.$emit("addKr", krId, goalId, goalName)
    },
    addGoalUnderKr(krId, krName) {
      this.$emit("addGoalUnderKr", krId, krName)
    },
    editGoal(goalId) {
      this.$emit("editGoal", goalId)
    }
  }
}
</script>

<style lang="scss" scoped>
.goal-wrapper {
  width: 100%;
  .goal-content{
    background: white;
    position: absolute;
    cursor: pointer;
    .top-line{
      width: 1px;
      background: #BABABA;
      position: absolute;
      left: -35px;
    }
    .left-line{
      height: 1px;
      width: 35px;
      background: #BABABA;
      position: absolute;
      left: -35px;
    }
    .bottom-line{
      height: 30px;
      width: 1px;
      background: #BABABA;
      position: absolute;
      left: 20px;
      bottom:0;
    }
  }
  .kr-content{
    background: #ddebf9;
    position: absolute;
    .pre-line{
      height: 1px;
      width: 20px;
      background: #BABABA;
      position: absolute;
      left: -20px;
    }
    .next-line{
      height: 1px;
      width: 36px;
      background: #BABABA;
      position: absolute;
      right: -57px;
    }
  }
  .item {
    padding: 10px 15px;
    box-shadow: 0 3px 4px #cccccc;
    .el-progress {
      margin: 10px 0;
    }
    .row {
      display: flex;
      .level {
        background-color: #CCE7FF;
        color: #3296FA;
        display: inline-block;
        padding: 0 8px;
        border-radius: 20px;
        height: 26px;
        line-height: 26px;
      }
      .user {
        max-width: calc(100% - 80px);
        margin-left: 10px;
        display: inline-block;
        padding: 0 8px;
        height: 26px;
        line-height: 26px;
        border: 1px solid #ECECEC;
        border-radius: 20px;
      }
    }
    .kr-logo {
      color: #409EFF;
      font-weight: bold;
      margin-right: 10px;
    }
    .over-text-hidden {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
    .over-text-hidden2 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
  .add-btn {
    display: inline-block;
    color: #FFF;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: #FF9540;
    position: absolute;
    right: -46px;
    top: calc(50% - 10px);
    cursor: pointer;
  }
  .show-btn {
    display: inline-block;
    color: #3296FA;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: #FFF;
    position: absolute;
    right: -25px;
    top: calc(50% - 10px);
    cursor: pointer;
  }
}

</style>